<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link 
            href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" 
            rel="stylesheet">
        <link rel="stylesheet" href="css/appctl.css" media="screen">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

        <script>
            var dojoConfig = {
                async: true
            };

        </script>

        <!--script src="js/slibs/dojo/dojo.js"></script-->
        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>

        <script type="text/javascript">
            require([
                "dojo/request",
                "dojo/_base/array",
                "dojo/query",
                "dojo/dom-construct",
                "dojo/fx",
                "dojo/domReady!"
            ], function(request, arrayUtil, query, domConstruct, fx) {

                fx.wipeOut({node: "errorAlert"}).play();

                var deferred = request.get("rst/user", {
                    handleAs: "json"
                });



                function makeRow(user, node) {
                    var clz = user.lastName ? '' : 'warning';
                    clz = (user.enabled == 'y') ? clz : 'error';
                    // clz=clz.trim();
                    domConstruct.create("tr", {class: clz,
                        innerHTML: makeCell(user.idUser) +
                                makeCell(user.login) +
                                makeCell(user.lastName) +
                                makeCell(user.userGroup) +
                                makeCell(user.enabled)},
                    node);
                }

                function makeCell(text) {
                    text ? '' : text = 'не указано';
                    //console.log(clz);
                    return "<td>" + text + "</td>";

                }


                deferred.response.then(function(response) {

                    console.log(response);


                    var userlist = (query("#usersGrid tbody"))[0]; //returns NodeList, actually array with dojo extensions

                    //tomee returns {user:[{...},{..}]}, jboss returns [{user},{user}]
                    var usersArray = response.data.user ? response.data.user : response.data;

                    arrayUtil.forEach(usersArray, function(user) {
                        //   console.log(user);
                        makeRow(user, userlist);
                    });

                }, function(error) {
                    //console.log(error.response);
                    fx.wipeOut({node: "usersGrid"}).play();
                    fx.wipeIn({node: "errorAlert"}).play();
                    var errA = query("#errorAlert pre")[0];
                    errA.innerHTML = "Message:" + error.response.data.message
                            + "\n\nStackTrace:\n"
                            + error.response.data.stacktrace;
                });

            });

        </script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="brand" href="#">User list</a>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                </div>
                <div class="span9">
                    <div id="errorAlert" class="alert alert-error">
                        <a class="close" data-dismiss="alert" href="#">&times;</a>
                        <p>
                            <strong>К сожалению произошла ошибка,
                                пожалуйста скопируйте текст сообщения и вышлите разработчику
                            </strong>
                        </p>
                        <pre><!--ajax here--></pre>
                    </div>
                    <p>ADSL and DialUp users list below:</p>
                    <table id="usersGrid" class="table table-hover">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Login</th>
                                <th>User</th>
                                <th>Group</th>
                                <th>Enabled?</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--ajax here-->
                        </tbody>
                    </table>
                </div>
            </div>
            <hr/>
            <footer>
                <span>2013 @IT Department</span>
                <a href="#">$HeadURL: http://iceline-acct.googlecode.com/svn/tags/1.0-alpha-1/wi/src/main/webapp/index.html $</a>
            </footer>
        </div>


    </body>
</html>